<template>
  <div class="userWrapper" :style="computedStyle">
    <div class="topWrapper">
        <img :src="computedUserInfo.avatar"/>
        <div class="info">
            <div class="name">{{computedUserInfo.userName}}</div>
            <div>微信号：{{computedUserInfo.loginName}}</div>
            <div>地址：北京昌平区</div>
        </div>
    </div>
    <div class="bottomWrapper">
        <Button v-if="!addRequest">发消息</Button>
        <Button v-else @click="openFriendsRequst">添加到通讯录</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入工具库
import { ref, onMounted, onUnmounted, computed } from 'vue'

import useAuthStore from '@/stores/authStore'
import { showFriendsRequestWin } from '@/utils/Electron'
import router from  '@/router'
// 导入组件库
import { Button } from 'ant-design-vue'
const authStore = useAuthStore()
const currentUserInfo = authStore.userInfo
// 定义属性
const props = defineProps({
    pos: {
        type: Object,
        default: () => ({left: 0, top: 0})
    },
    userInfo: {
        type: Object,
        default: () => ({})
    },
    addRequest: {
        type: Boolean,
        default: false
    }
})
const computedStyle = computed(()=> ({left: `${props.pos.left}px`, top: `${props.pos.top}px`}))
// 定义方法
const openFriendsRequst = () => {
    //router.push({path: "/home/friend-request", query: {requestId: props.userInfo.userId, remark: props.userInfo.userName}})
    // 要添加好友的userId, 以及他的名称 和备注（默认是自己的昵称）传递过去
    showFriendsRequestWin({requestId: props.userInfo.userId, remark: props.userInfo.userName})
}
const computedUserInfo = computed(()=> {
    return props.userInfo.userName ? props.userInfo : currentUserInfo
})
// 生命周期
onMounted(() => {
})

onUnmounted(() => {
})
</script>

<style lang="less" scoped>
.userWrapper {
    display: flex;
    background-color: white;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #cecece;
    padding: 22px;
    position: absolute;
    flex-direction: column;
    padding-right: 40px;
    width: 220px;
    .topWrapper {
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;
        margin-bottom: 25px;
        gap: 13px;
        img {
            width: 55px;
            border-radius: 7px;
        }
        .info {
            font-size: 12px;
            color: #b3b3b3;
            gap: 1px;
            display: flex;
            flex-direction: column;
            .name {
               font-size: 15px;
               color: #000;
            }
        }
    }
    .bottomWrapper {
        text-align: center;
        button {
            background-color: #07c160;
            color: white;
            border: none;
            width: 55%;
            border-radius: 3px;
        }
    }
}
</style>